<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <vue-header></vue-header>
       <vue-body></vue-body>
       <vue-footer></vue-footer>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            //定义局部组件
            components:{
                //属性名就是组件的名字,属性值就是组件的定义
                //vue-header
                //VueHeader=>使用的时候需要转小写而且中间加-
                //组件名和标签名不一样，组件名可以大写开头，不用需加-，但是标签名是小写，用 -连接
                'VueHeader':{
                    data(){
                        return {title:'头部'};
                    },
                    //在VueHeader中注册的局部组件VueHeaderAge,在别的组件里用不了
                    components:{
                        'VueHeaderAge':{
                            template:'<p>VueHeaderAge</p>'
                        }
                    },
                    template:`<div>{{title}}<vue-header-age></vue-header-age></div>`
                },
                'VueBody':{
                    data(){
                        return {title:'身体'};
                    },
                    template:`<div>{{title}}</div>`
                },
                'VueFooter':{
                    data(){
                        return {title:'尾部'};
                    },
                    template:`<div>{{title}}</div>`
                }
            }
        });
    </script>
</body>
</html>